<template>
    <div
        class="cell-content el-row"
        @click="goLink(data.options.linkType, data.options.linkUrl, data.options.query)"
        :style="{
            'color': data.options.color,
            'margin-left': data.options.marginLeft,
            'margin-right': data.options.marginRight,
            'background-color':data.options.backgroundColor,
            'background-image':data.options.backgroundImage,
            'background-repeat': 'no-repeat',
            'background-size': 'cover',
    }">
        <div class="col col-img">
            <div
                class="left-img-content"
                @mouseover="data.options.showHover = true"
                @mouseout="data.options.showHover = false"
                :class="{'hover-zoom': data.options.showHover}"
                :style="{
                    'margin-right': data.options.imgMarginRight
            }">
                <img
                    v-if="data.options.imgType === 'image'"
                    :src="data.options.imgDefaultValue"
                    :style="{
                        'border-radius': data.options.borderRadius,
                        'width': data.options.imgWidth,
                        'height': data.options.imgHeight
                    }"
                >
                <i
                    v-else
                    :class="['iconfont', data.options.iconName]"
                    :style="{
                        'color': data.options.color,
                        'font-size': data.options.fontSize
                }"/>
            </div>
        </div>
        <div class="col col-text">
            <div>
                <h2 class="text-title" v-html="data.options.titleDefaultValue"/>
                <p class="text-desc" v-html="data.options.descDefaultValue"/>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'BaseCell',
    props: {
        data: {
            type: Object
        }
    }
}
</script>
